<template>
    <el-dialog
        :title="look?'查看':'编辑'"
        :visible.sync="showDialog"
        width="500px"
        :before-close="close"
        :close-on-click-modal="false"
        @open="open"
    >
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" :disabled="look?true:false"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="name">
                <el-input type="textarea" v-model="form.name" :disabled="look?true:false"></el-input>
            </el-form-item>
            <el-form-item label="视频" prop="name">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary" :disabled="look?true:false">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传map4文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="confirm" v-if="!look">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false,
        },
        look: {
            type: Boolean,
            default: false,
        },
        editData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            title: '新增',
            form: {
                name,
            },
            rules: {
                name: [{ required: true, message: '请输入' }],
            },
            fileList: [
                { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
                { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
            ],
        };
    },
    mounted() {},
    methods: {
        open() {
            this.getType();
            this.getProvince();
            if (this.editData) {
                this.title = '编辑';
                this.form = this.editData;
                this.center = [this.editData.longitude, this.editData.latitude];
                this.marker.position = this.center;
                if (this.form.provinceId) {
                    this.getCity();
                }
                if (this.form.cityId) {
                    this.getCounty();
                }
                if (this.form.countyList) {
                    this.getCounty();
                }
                if (this.form.countyId) {
                    this.getStreet();
                }
                if (this.form.streetId) {
                    this.getCommunity();
                }
            } else {
                this.title = '新增';
                this.form.longitude = this.center[0];
                this.form.latitude = this.center[1];
            }
        },
        close() {
            this.reset();
            this.$emit('close');
        },

        confirm() {
            this.$refs.form.validate((valid) => {
                const that = this;
                if (valid) {
                    const api = this.form.id ? this.api.organizationUpdate : this.api.organizationAdd;
                    this.axios.post(
                        api,
                        {
                            id: that.form.id,
                            cityId: that.form.cityId == that.form.cityStr ? '' : that.form.cityId,
                            cityStr: that.form.cityStr,
                            communityId: that.form.communityId == that.form.communityStr ? '' : that.form.communityId,
                            communityStr: that.form.communityStr,
                            countyId: that.form.countyId == that.form.countyStr ? '' : that.form.countyId,
                            countyStr: that.form.countyStr,
                            educationType: that.form.educationType == that.form.educationTypeStr ? '' : that.form.educationType,
                            educationTypeStr: that.form.educationTypeStr,
                            houseNumber: that.form.houseNumber,
                            latitude: that.form.latitude,
                            longitude: that.form.longitude,
                            name: that.form.name,
                            provinceId: that.form.provinceId == that.form.provinceStr ? '' : that.form.provinceId,
                            provinceStr: that.form.provinceStr,
                            streetId: that.form.streetStr == that.form.streetId ? '' : that.form.streetId,
                            streetStr: that.form.streetStr,
                            studentCount: that.form.studentCount,
                        },
                        (res) => {
                            this.$message.success(res.msg);
                            this.reset();
                            this.$emit('close', true);
                        },
                        (fail) => {
                            this.$message.error(fail.msg);
                        },
                    );
                }
            });
        },
        reset() {
            this.form = {
                nickName: '',
                username: '',
                password: '',
            };
            this.$refs.form.resetFields();
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
    },
};
</script>
<style lang="scss" scoped>
</style>
